<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>幼儿园考勤</title>
	<link rel="stylesheet" href="../css/common2.css">
	<style>
		.table th {
			border: thin solid white;
		}

		.search_box input,
		.search_box select {
			padding: 5px;
			border: solid thin black;
		}

		button {
			padding: 5px;
			margin-left: 20px;
		}

		.w-btn {
			height: 32.08px;
			border: none;
			color: white;
			border-radius: 2px;
			background-image: linear-gradient(to bottom, #007fce, #009bd9, #007fd0);
			box-shadow: 0 1px 2px 0 #0f0f0f;
			cursor: pointer;
		}

		.w-btn:active {
			transform: scale(0.95);
		}
	</style>
</head>

<body class="main-body">
	<div id="vue-root" style="margin-top:50px;">

		<div class="search_box">
			<select v-model="classesId">
				<option :value="null" disabled>请选择班级</option>
				<option :value="1">教师</option>
				<option v-for="classes in classess" :key="classes.id" :value="classes.id" v-text="classes.name">
				</option>
			</select>
			<input id="period" placeholder="请选择时间段">
			<a href="attendance_calendar.html">
				<button class="w-btn">考勤日期设置</button>
			</a>

			<span style="margin-right: 20px;"></span>
			<input type="checkbox" id="checkbox" v-model="twice">
			<label for="checkbox">1天2次进出</label>
			<a href="attendance_time3.html" v-if="twice">
				<button class="w-btn">1天2次进出时间设置</button>
			</a>
		</div>
		<div class="table" v-if="loaded">
			<table class="table_top">
				<thead>
					<tr>
						<th rowspan="2">姓名</th>
						<th rowspan="2">应出勤天数</th>

						<template v-if="twice">
							<th rowspan="2">上午出勤天数</th>
							<th rowspan="2">下午出勤天数</th>
						</template>
						<template v-else>
							<th rowspan="2">实际出勤天数</th>
							<th rowspan="2">缺勤天数</th>
							<th rowspan="2">出勤率</th>
						</template>

						<th v-for="(date1,i) in dates" :key="i" :colspan="twice?4:2" v-text="date1.name"></th>
					</tr>
					<tr>

						<template v-for="(date1,i) in dates" :key="i">
							<template v-if="twice">
								<th>上午到校</th>
								<th>上午离校</th>
								<th>下午到校</th>
								<th>下午离校</th>
							</template>
							<template v-else>
								<th>上午到校</th>
								<th>下午离校</th>
							</template>
						</template>

					</tr>
				</thead>
				<tbody id="list">
					<tr v-for="(item,index) in list" :key="index">
						<td v-text="item.name"></td>
						<td v-text="item.total"></td>

						<template v-if="twice">
							<td v-text="noon(item.data,0,1)"></td>
							<td v-text="noon(item.data,2,3)"></td>
						</template>
						<template v-else>
							<td v-text="len(item.data)"></td>
							<td v-text="item.total-len(item.data)"></td>
							<td v-text="(len(item.data)*100/item.total).toFixed(0)+'%'"></td>
						</template>

						<template v-for="(date1,i) in dates" :key="i">
							<template v-if="date1.name in item.data">
								<td v-for="(it,i1) in item.data[date1.name]" :key="i1">{{punch(it)}}</td>
							</template>
							<template v-else>
								<td v-for="i1 in (twice?4:2)" :key="i1"></td>
							</template>
						</template>
					</tr>
				</tbody>
			</table>
		</div>

		<button @click="exports" v-if="valid">导出考勤表</button>

	</div>
	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/lib/laydate/laydate.js"></script>
	<script src="/js/common.js"></script>


	<script>

		var schoolId = top_params().id;
		var app = new Vue({
			el: '#vue-root',
			data: {
				classess: [],
				classesId: null,
				period: {},
				list: [],
				dates: [],
				twice: null,
				loaded: false
			},
			created: function () {
				this.twice = !!localStorage.twice;
				axios.get('/pc/classes/all/' + schoolId).then(function (res) {
					this.classess = res.data;
				}.bind(this));
			},
			methods: {
				getData: function () {
					this.loaded = false;
					if (!this.valid) return;
					axios.get(this.url, { params: this.params }).then(function (res) {
						this.list = res.data;
						this.loaded = true;
					}.bind(this));
				},
				len: function (o) {
					return Object.keys(o).length;
				},
				exports: function () {
					location.href = this.url.replace('/detail/', '/detail/export/') + '?' + Qs.stringify(this.params);
				},
				noon: function (data, i, j) {
					if (!data) console.log('data为空');

					var s = 0, v;
					for (var key in data) {
						v = data[key];
						if (j < v.length) if (v[i] || v[j]) s += 1;
					}
					return s;
				},
				punch: function (time) {
					return time == '00:00:00' ? '补签' : time;
				}
			},
			computed: {
				valid: function () {
					return this.classesId && this.period.startDate && this.period.endDate;
				},
				url: function () {
					return '/pc/attendance/detail/' + (this.classesId == 1 ? schoolId : this.classesId);
				},
				params: function () {
					var o = {};
					if (this.classesId == 1) o.byTeacher = true;
					if (this.twice) o.type = 1;
					return Object.assign(o, this.period);
				}
			},
			watch: {
				classesId: function (nv, ov) {
					this.getData();
				},
				period: function (to, from) {
					this.getData();
				},
				twice: function (to, from) {
					if (to) localStorage.twice = true;
					else localStorage.removeItem('twice');
					this.getData();
				}
			}
		});


		laydate.render({
			elem: '#period',
			type: 'date',
			format: 'yyyy-MM-dd',
			range: true,
			done: function (value, date2, endDate) {
				var a = value.split(' - '), a1 = [], date, date1;
				app.period = {
					startDate: a[0],
					endDate: a[1]
				};
				date = dayjs(a[0]);
				date1 = dayjs(a[1]);
				while (!date.isAfter(date1)) {
					a1.push({
						name: date.format('YYYY-MM-DD'),
						day: date.day()
					});
					date = date.add(1, 'day');
				}
				app.dates = a1;
			}
		});

	</script>

</body>

</html>